<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <search-form ref="searchForm" :handleSearch="loadData"></search-form>
      <custom-table
        :columns="columns"
        :cols="cols"
        :colsZh="colsZh"
        :list="list"
        :loadData="loadData"
        :methodRefs="methodRefs()"></custom-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { addPatient, deletePatient, editPatient, getPatientList } from '@/api/patient'
import SearchForm from './components/SearchForm'
import CustomTable from './components/CustomTable'
import moment from 'moment'

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    // width: '25%',
    scopedSlots: {
      filterDropdown: 'filterDropdown',
      filterIcon: 'filterIcon',
      customRender: 'name'
    },
    onFilter: (value, record) =>
      record.name
        .toString()
        .toLowerCase()
        .includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => {
          this.searchInput.focus()
        }, 0)
      }
    }
  },
  {
    title: '性别',
    dataIndex: 'genere',
    // width: '15%',
    scopedSlots: { customRender: 'genere' },
    filters: [
      {
        text: '男',
        value: 'male'
      },
      {
        text: '女',
        value: 'female'
      }
    ],
    onFilter: (value, record) => record.name.indexOf(value) === 0
  },
  {
    title: '年龄',
    dataIndex: 'age',
    scopedSlots: { customRender: 'age' },
    sorter: (a, b) => a.age - b.age
  },
  {
    title: '身份证号',
    dataIndex: 'id',
    // width: '40%',
    scopedSlots: { customRender: 'id' }
  },
  {
    title: '血压',
    dataIndex: 'blood_pressure',
    scopedSlots: { customRender: 'blood_pressure' }
  },
  {
    title: '血糖',
    dataIndex: 'blood_sugar',
    scopedSlots: { customRender: 'blood_sugar' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

const cols = ['name', 'age', 'id', 'genere', 'blood_pressure', 'blood_sugar']
const colsZh = ['姓名', '年龄', '身份证', '性别', '血压', '血糖']

export default {
  name: 'TableList',
  components: {
    SearchForm,
    CustomTable
  },
  data () {
    return {
      columns,
      cols,
      colsZh,
      list: []
    }
  },
  mounted () {
    const params = {
        startDate: moment(),
        endDate: moment()
      }
    this.loadData(params)
  },
  methods: {
    methodRefs () {
      return {
        loadData: this.loadData,
        changeData: this.changeData,
        addData: this.addData,
        editData: this.editData,
        deleteData: this.deleteData
      }
    },
    loadData (queryParam = this.$refs.searchForm.queryParam) {
      const params = {
        startDate: queryParam.startDate.format('yyyy-MM-DD'),
        endDate: queryParam.endDate.format('yyyy-MM-DD')
      }
      getPatientList(params).then(res => {
        console.log(res)
        const list = res.data
        this.list = list.map((item, index) => ({ ...item, key: index }))
      })
    },
    changeData (list) {
      this.list = list.map(item => ({ ...item }))
    },
    addData (params) {
      return addPatient(params)
    },
    editData (params) {
      return editPatient(params)
    },
    deleteData (params) {
      return deletePatient(params)
    }
  }
}
</script>
